<template>
  <div class="select-area">
    <div class="select-item">
      年份：
      <el-date-picker
        @change="yearChanged"
        value-format="yyyy"
        :disabled="selectDisabled"
        v-model="selectYear"
        type="year"
        placeholder="请选择年份">
      </el-date-picker>
    </div>

    <div class="select-item">
      城市：
      <el-select
        :disabled="selectDisabled"
        filterable
        @change="changeCity"
        v-model="selectCityId"
        placeholder="请选择城市">
        <el-option v-for="dict in optionData.city" :key="dict.value" :label="dict.label" :value="dict.value">
        </el-option>
      </el-select>
    </div>

    <div class="select-item">
      区县：
      <el-select
        :disabled="selectDisabled"
        filterable
        @change="changeCounty"
        v-model="selectCountyId"
        placeholder="请选择区县">
        <el-option
          v-for="dict in optionData.county[selectCityId]"
          :key="dict.value"
          :label="dict.label"
          :value="dict.value">
        </el-option>
      </el-select>
    </div>

    <div class="select-item">
      河湖名称：
      <el-select :disabled="selectDisabled" filterable v-model="selectRiverId" placeholder="请选择河湖">
        <el-option
          v-for="dict in optionData.river[selectCountyId]"
          :key="dict.value"
          :label="dict.label"
          :value="dict.value">
        </el-option>
      </el-select>
    </div>

    <div class="select-item">
      河湖类型：
      <el-select :disabled="selectDisabled" @change="changeLevel" v-model="selectLevel" placeholder="请选择河湖类型">
        <el-option v-for="dict in levels" :key="dict.value" :label="dict.label" :value="dict.value"> </el-option>
      </el-select>
    </div>
  </div>
</template>

<script>
import { getCascadeData } from "@/api/sysregion"
import Constans from "@/util/constants"
import { isEmpty } from "@/util/empty"
import { getObj } from "@/api/river"

export default {
  props: ["riverId"],
  data() {
    return {
      selectCityId: null,
      selectCountyId: null,
      selectRiverId: null,
      selectYear: null,
      selectLevel: null,
      selectDisabled: false,
      years: [
        { value: "2019", label: "2019" },
        { value: "2022", label: "2022" },
      ],
      levels: [
        {
          label: "骨干河道",
          value: 1,
        },
        {
          label: "城区河道",
          value: 2,
        },
        {
          label: "农村河道",
          value: 3,
        },
        {
          label: "大型湖泊",
          value: 4,
        },
        {
          label: "小型湖泊",
          value: 5,
        },
        {
          label: "大中型水库",
          value: 6,
        },
        {
          label: "小型水库",
          value: 7,
        },
      ],
      optionData: {
        city: [],
        county: {},
        river: {},
      },
    }
  },
  watch: {
    selectRiverId(val) {
      this.$emit("selectChanged", val)
    },
  },
  mounted() {
    this.getList()
  },
  methods: {
    getRiverData(riverId) {
      getObj(riverId).then((res) => {
        let riverData = res.data.data
        if (riverData != null) {
          this.selectLevel = riverData.level
          this.selectYear = riverData.year
          this.selectCityId = riverData.cityId
          this.selectCountyId = riverData.countyId
          this.selectRiverId = riverId
          this.selectDisabled = true
        }
      })
    },
    //获取级联数据，不传入河湖类型和年份
    getList() {
      getCascadeData(Constans.JIANG_SU, null, null).then((res) => {
        this.optionData = res.data.data
        if (!isEmpty(this.riverId)) {
          this.getRiverData(this.riverId)
        }
      })
    },
    //下拉河湖类型改变
    changeLevel() {
      this.getCascadeData()
    },
    //下拉年份改变
    yearChanged() {
      this.getCascadeData()
    },
    //重新获取级联数据（传入河湖类型和年份给后端过滤）
    getCascadeData() {
      getCascadeData(Constans.JIANG_SU, this.selectLevel, this.selectYear).then((res) => {
        this.optionData = res.data.data
        this.selectRiverId = null
      })
    },
    changeCity(val) {
      if (val) {
        this.selectCountyId = this.optionData.county[val][0].value
        this.changeCounty()
      } else {
        this.selectCountyId = null //若前一个控件清空则后一个控件所选内容也清空
        this.changeCounty()
      }
    },
    changeCounty() {
      let val = this.selectCountyId
      if (val) {
        let riverList = this.optionData.river[val]
        if (riverList.length > 0) {
          this.selectRiverId = riverList[0].value
        } else {
          this.selectRiverId = null
        }
      } else {
        this.selectRiverId = null
      }
    },
  },
}
</script>

<style lang="scss" scoped>
.select-area {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  padding: 20px 20px 0 20px;
  .select-item {
    display: flex;
    flex-direction: row;
    align-items: center;
    color: #303133;
    font-size: 14px;
    margin: 0 20px 10px 0;
  }
}
</style>
